<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 主体卡片区域 -->
    <el-card>
      <el-table :data="rolesList">
        <!-- 权限展开 -->
        <el-table-column type="expand" label="展开">
          <template v-slot="{row}">
            <el-row style="background:#cdcdcd;padding:20px;margin:20px" v-for="item1 of row.children" :key="item1.id">
              <el-col :span="4" style="display:flex;align-items:center;height:100%;margin-top:100px;">
                <el-tag>{{item1.authName}}<i class="el-icon-caret-right"></i></el-tag>

              </el-col>
              <el-col :span="20">
                <el-row style="background:#fff;margin:20px 0;padding:20px 0;" v-for="item2 of item1.children"
                  :key="item2.id">
                  <el-col :span="4">
                    <el-tag type="warning">{{item2.authName}}<i class="el-icon-caret-right"></i></el-tag>

                  </el-col>
                  <el-col :span="20">
                    <el-tag type="danger" v-for="item3 of item2.children" :key="item3.id" closable
                      @close="handleClose(row,item3.id)">
                      {{item3.authName}}</el-tag>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>

          </template>
        </el-table-column>

        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="roleName" label="角色名称"></el-table-column>
        <el-table-column prop="roleDesc" label="角色描述"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="{row}">
            <!-- 修改 -->
            <el-button type="primary" icon="el-icon-edit" size='mini'></el-button>
            <!-- 删除 -->
            <el-button type=" danger" icon="el-icon-delete" size='mini'></el-button>
            <!-- 分配权限 -->
            <el-tooltip effect="dark" content="分配权限" placement="top" :enterable="false">
              <el-button type="warning" icon="el-icon-setting" size='mini' @click="showRightDialog(row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="分配权限" :visible.sync="rightDialogVisible" width="30%">
      <!-- 内容插槽，权限树🌲 -->
      <el-tree ref="myTree" :data="rightsList" default-expand-all show-checkbox :props="{label:'authName'}"
        node-key="id" :default-checked-keys="defkeys"></el-tree>
      <template v-slot:footer>
        <el-button plain>取消</el-button>
        <el-button type="primary" @click="saveRights">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      rolesList: [],
      rightDialogVisible: false,
      rightsList: [],
      defkeys: [],
      roleId: ''
    }
  },
  methods: {
    // 获取全选半选、
    async saveRights () {
      // 利用展开运算符，合并半选和全选
      const idStr = [...this.$refs.myTree.getCheckedKeys(), ...this.$refs.myTree.getHalfCheckedKeys()].join(',')
      // console.log(rids)
      // 发起接口请求
      await this.$http.post(`roles/${this.roleId}/rights`, { rids: idStr })
      // 取消分配权限弹窗
      this.rightDialogVisible = false
      // 重新渲染列表
      this.getRolesList()
    },
    // 渲染权限树
    async showRightDialog (row) {
      this.roleId = row.id
      // 获取权限列表树
      const { data: res } = await this.$http.get('rights/tree')
      this.rightsList = res.data
      // console.log(row)
      // console.log(this.rightsList)
      const arr = []
      // 用递归的方法
      function listFn (obj) {
        if (obj.children && obj.children.length > 0) {
          obj.children.forEach(item => {
            listFn(item)
          })
        } else {
          arr.push(obj.id)
        }
      }
      listFn(row)
      // forEach方法
      // row.children.forEach(item1 => {
      //   if (item1.children && item1.children.length > 0) {
      //     item1.children.forEach(item2 => {
      //       if (item2.children && item2.children.length > 0) {
      //         item2.children.forEach(item3 => {
      //           arr.push(item3.id)
      //         })
      //       }
      //     })
      //   }
      // })
      console.log(arr)
      this.defkeys = arr
      this.rightDialogVisible = true
    },
    // 删除角色列表tag
    handleClose (row, id) {
      this.$confirm('此操作将永久删除该账号, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
        .then(async () => {
          const { data: res } = await this.$http.delete(`roles/${row.id}/rights/${id}`)
          // console.log(row.id, id)
          row.children = res.data
          // console.log(res.data)
          this.$message({ type: 'success', message: '删除成功!' })
        })
        .catch(() => { this.$message({ type: 'info', message: '已取消删除' }) })
    },
    // 获取角色列表
    async getRolesList () {
      const { data: res } = await this.$http.get('roles')
      this.rolesList = res.data
      // console.log(this.rolesList)
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {},
  created () {
    this.getRolesList()
  },
  mounted () { }
}
</script>

<style scoped lang='less'>
.el-tag {
  margin: 20px;
}
</style>
